<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="24" :xs="24">
                <!-- 数据筛选表单 -->
                <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
                    <!-- 数据筛选表单组件 -->
                    <!-- <el-form-item label="用户ID" prop="username">
                        <el-input v-model="queryParams.username" placeholder="请输入用户ID" clearable size="small"
                            @keyup.enter="handleQuery" />
                    </el-form-item> -->
                    <el-form-item label="用户ID" prop="username">
                        <el-input v-model="queryParams.username" placeholder="请输入用户ID" clearable size="small"
                            @keyup.enter="handleQuery" />
                    </el-form-item>

                    <el-form-item label="状态" prop="status">
                        <el-select v-model="queryParams.status" size="small" placeholder="请选择">
                            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                    <!-- 数据筛选操作按钮 -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
                            搜索
                        </el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>

                <!-- 数据操作按钮 -->
                <el-row :gutter="20">
                    <el-col :span="3">
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">
                            新增用户
                        </el-button>
                    </el-col>
                </el-row>

                <!-- 数据表格 -->
                <el-table v-loading="loading" :data="userList">
                    <!-- 数据表格列 -->
                    <el-table-column label="用户ID" align="center" prop="userId" />
                    <el-table-column label="用户名称" align="center" prop="userName" />
                    <el-table-column label="用户昵称" align="center" prop="nickName" />

                    <el-table-column label="状态" align="center" prop="status">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status === '0'" size="small" type="success">正常</el-tag>
                            <el-tag v-else-if="scope.row.status === '1'" size="small" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>

                    <!-- 数据行操作按钮 -->
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button size="small" type="text" icon="el-icon-key" @click="handleRole(scope.row)">
                                分配角色
                            </el-button>
                            <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">
                                修改
                            </el-button>
                            <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 数据分页加载 -->
                <el-pagination :current-page="pageNum" :page-sizes="[5, 10, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </el-col>
        </el-row>

        <!-- 添加修改user对话框 -->
        <!-- <el-dialog :title="title" v-model:visible="open" width="500px" append-to-body> -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <!-- 数据编辑表单组件 -->
                <el-form-item label="用户名称" prop="userName">
                    <el-input v-model="form.userName" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-model="form.nickName" placeholder="请输入昵称" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 分配权限对话框 -->
        <!-- <el-dialog :title="roleTitle" v-model:visible="roleDialogFormVisible" width="300px">
            <el-form :model="roleForm">
                <el-tree ref="roleTree" :data="roleTreeData" show-checkbox :check-strictly="checkStrictly"
                    node-key="roleId" :default-expand-all="true" :props="defaultProps" />
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="roleDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitAuthRole">确 定</el-button>
                </div>
            </template>
        </el-dialog> -->
        <el-dialog :title="roleTitle" v-model="roleDialogFormVisible" width="300px">
            <el-form :model="roleForm">
                <el-tree ref="roleTree" :data="roleTreeData" show-checkbox node-key="roleId" :props="defaultProps"
                    :default-checked-keys="defaultCheckedKeys" />
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="roleDialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitAuthRole">确定</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>


<script>
/** 导入axios Api */
import { listUserByPage, getUser, addUser, updateUser, deleteUser, authRole } from '@/api/user'
import { listAllRole } from '@/api/role'
export default {
    name: 'User',
    data() {
        return {
            retryCount: 0,
            maxRetries: 3,
            roleLoading: false,  // 新增加载状态
            // 状态类型
            statusOptions: [
                {
                    value: '0',
                    label: '正常'
                },
                {
                    value: '1',
                    label: '禁用'
                }
            ],
            // User类型
            typeOptions: undefined,
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 当前页
            pageNum: 0,
            //pageNum: 1,
            // 每页数据量
            pageSize: 0,
            //pageSize: 5,
            // User表格数据
            userList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 数据查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 5,
                username: null,
                status: null
            },
            // 数据编辑表单
            form: {},
            // 表单数据校验规则
            rules: {
                userName: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                nickName: [
                    { required: true, message: '昵称不能为空', trigger: 'blur' }
                ]
            },
            roleDialogFormVisible: false,
            defaultProps: {
                label: 'roleKey'
            },
            roleForm: {},
            roleTreeData: [],
            checkStrictly: true,
            roleTitle: ''
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /** 查询User数据列表 */
        getList() {
            this.loading = true
            console.log('请求参数:', this.queryParams)  // 添加这行调试
            listUserByPage(this.queryParams).then((response) => {
                console.log("API返回数据：", response.data.list);
                this.userList = response.data.list
                this.total = response.data.total
                this.pageNum = this.queryParams.pageNum
                this.pageSize = this.queryParams.pageSize
                this.loading = false
            })
        },
        /** 处理分页 */
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.getList()
        },

        /** 数据编辑对话框取消按钮 */
        cancel() {
            this.open = false
            this.resetForm()
        },

        /** 数据编辑表单清空 */
        resetForm() {
            this.form = {
                userId: null,
                userName: null,
                nickName: null,
                status: '0'
            }
        },

        resetRoleForm() {
            this.roleForm = {
                userId: null,
                roleIds: []
            }
        },

        /** 数据筛选参数重置按钮 */
        resetQueryParams() {
            this.queryParams.pageNum = 1
            this.queryParams.pageSize = 5
        },

        /** 数据筛选搜索按钮 */
        // handleQuery() {
        //     this.resetQueryParams()
        //     this.getList()
        //     this.$message.success('查询成功')
        // },
        handleQuery() {
            if (!this.queryParams.username) {
                this.$message.warning('请输入用户ID');
                return;
            }

            this.loading = true;
            getUser(this.queryParams.username)  // 直接使用getUser查询单个用户
                .then((response) => {
                    if (response.data) {
                        // 将单个用户数据放入数组，以便表格显示
                        this.userList = [response.data];
                        this.total = 1;
                    } else {
                        this.userList = [];
                        this.total = 0;
                        this.$message.warning('未找到该用户');
                    }
                })
                .catch((error) => {
                    console.error('查询用户失败:', error);
                    this.$message.error('查询用户失败');
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        /** 数据筛选重置按钮 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 5,
                username: null,
                status: null
            }
            this.getList()
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.resetForm()
            this.open = true
            this.title = '添加User'
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.resetForm()
            getUser(row.userId).then((response) => {
                this.form = response.data
                this.open = true
                this.title = '修改User'
            })
        },



        /** 数据提交按钮 */
        // submitForm: function () {
        //     this.$refs['form'].validate((valid) => {
        //         if (valid) {
        //             if (this.form.userId === null) {
        //                 addUser(this.form).then((response) => {
        //                     this.$message.success(response.msg)
        //                     this.open = false
        //                     this.title = ''
        //                     this.getList()
        //                 })
        //             } else {
        //                 updateUser(this.form).then((response) => {
        //                     this.$message.success(response.msg)
        //                     this.open = false
        //                     this.title = ''
        //                     this.getList()
        //                 })
        //             }
        //         }
        //     })
        // },
        
        submitForm: function () {
            this.$refs['form'].validate((valid) => {
                if (!valid) {
                    console.log('表单验证失败');
                    return false;
                }

                this.loading = true; // 添加加载状态
                const operation = this.form.userId === null
                    ? addUser(this.form)
                    : updateUser(this.form);

                operation.then((response) => {
                    this.$message.success(response.msg || '操作成功');
                    this.open = false;
                    this.getList();
                }).catch((error) => {
                    console.error('操作失败:', error);
                    const errorMsg = error.response?.data?.msg
                        || error.response?.data?.message
                        || error.message
                        || '操作失败，请检查控制台';
                    this.$message.error(errorMsg);
                }).finally(() => {
                    this.loading = false;
                });
            });
        },

        // submitForm: function () {
        //     this.$refs['form'].validate((valid) => {
        //         if (!valid) {
        //             this.$message.warning('请完善表单信息');
        //             return false;
        //         }

        //         this.loading = true;
        //         console.log('提交数据:', JSON.stringify(this.form));

        //         const operation = this.form.userId === null
        //             ? addUser(this.form)
        //             : updateUser(this.form);

        //         operation.then((response) => {
        //             console.log('完整响应:', response);
        //             if (response && response.code === 200) {  // 根据实际后端响应结构调整
        //                 this.$message.success(response.msg || '操作成功');
        //                 this.open = false;
        //                 this.getList();
        //             } else {
        //                 const msg = response?.msg || response?.message || '操作完成但返回异常';
        //                 this.$message.warning(msg);
        //             }
        //         }).catch((error) => {
        //             console.error('完整错误对象:', error);

        //             let errorMsg = '操作失败';
        //             if (error.response) {
        //                 // 尝试从不同位置获取错误信息
        //                 errorMsg = error.response.data?.msg ||
        //                     error.response.data?.message ||
        //                     error.response.statusText ||
        //                     `HTTP错误: ${error.response.status}`;
        //             } else if (error.request) {
        //                 errorMsg = '请求已发出但未收到响应';
        //             } else {
        //                 errorMsg = error.message || '未知错误';
        //             }

        //             this.$message.error(errorMsg);
        //         }).finally(() => {
        //             this.loading = false;
        //         });
        //     });
        // },

        /** 删除按钮操作 */
        handleDelete(row) {
            this.$confirm(
                '是否确认删除名称为"' + row.userName + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function () {
                    return deleteUser(row.userId)
                })
                .then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
                .catch(() => { })
        },

        /** 处理分配角色 */
        async handleRole(row) {
            this.roleForm.userId = row.userId
            this.roleTitle = `为用户[${row.nickName}]分配角色`

            // 先打开对话框
            this.roleDialogFormVisible = true

            // 等待对话框完全渲染
            await this.$nextTick()

            try {
                // 并行加载数据
                const [rolesRes, userRes] = await Promise.all([
                    listAllRole(),
                    getUser(row.userId)
                ])

                // 确保数据正确加载
                this.roleTreeData = rolesRes.data || []
                const roles = userRes.data?.roles || []
                const roleIds = roles.map(item => item.roleId)

                // 再次等待确保树组件渲染完成
                await this.$nextTick()

                // 检查并设置选中项
                if (this.$refs.roleTree) {
                    this.$refs.roleTree.setCheckedKeys(roleIds)
                } else {
                    console.error('角色树组件仍未初始化')
                    // 可以添加重试逻辑
                    setTimeout(() => {
                        if (this.$refs.roleTree) {
                            this.$refs.roleTree.setCheckedKeys(roleIds)
                        }
                    }, 300)
                }
            } catch (error) {
                console.error('加载角色数据失败:', error)
                this.$message.error('加载角色数据失败')
            }
        },
        /** 提交分配角色表单 */
        submitAuthRole() {
            this.roleForm.roleIds = this.$refs.roleTree.getCheckedKeys()
            authRole(this.roleForm).then((response) => {
                this.$message.success(response.msg)
                this.roleDialogFormVisible = false
                this.resetRoleForm()
            })
        }

    }
}
</script>